<template>
  <div class="container mobile_container">
    <topHeader ref="topHeader"></topHeader>

    <div class="video_detail">
      <!-- <video src=""></video> -->
      <div class="video_box">
        <i class="icon_close_big" @click="closeVideo"></i>
        <video :src="videoList[videoIndex]" autoplay controls ref="video" @ended="videoEnd" @pause="videoPause" @canplaythrough="videoCanplaythrough" width="100%"></video>
        <div class="video_end_mask" v-if="videoEnded">
          <div class="popup">
            <i class="icon_repaly" @click="replayVideo"></i>
            <p>{{viewText}}</p>
            <div class="btn btn_video_appointment" @click="appointmentClick">预约试听课程</div>
          </div>
        </div>
      </div>
    </div>

    <copyRight></copyRight>


    <!-- <div class="mask" v-if="maskShowStatus">
			<div class="popup">
				<template class="appointment_popup">
					<div class="appointment_popup_step1" v-if="appointmentStep == 1">
						<i class="icon_close_small"  @click="maskShowStatus = false"></i>
						<h4 class="title">立即预约</h4>
						<el-form :model="formAppointment" label-position="left" :rules="rules" ref="formData" class="rule_form">

							<el-form-item prop="phone">
								<el-input v-model="formAppointment.phone" placeholder="请输入您的手机号码"></el-input>
							</el-form-item>

							<el-form-item prop="name">
								<el-input v-model="formAppointment.name" placeholder="请输入您的孩子姓名"></el-input>
							</el-form-item>

							<el-form-item prop="schoolArea">
								<el-select v-model="formAppointment.schoolArea" placeholder="附近校区">
									<el-option label="北辰福第中心.北京朝阳" value="1"></el-option>
									<el-option label="通大家园中心.北京通州" value="2"></el-option>
									<el-option label="华远铭悦中心.北京通州" value="3"></el-option>
									<el-option label="华业东方玫瑰中心.北京通州" value="4"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item prop="age">
								<el-select v-model="formAppointment.age" placeholder="请选择您的孩子年龄">
									<el-option label="3岁以下" value="1"></el-option>
									<el-option label="3岁" value="3"></el-option>
									<el-option label="4岁" value="4"></el-option>
									<el-option label="5岁" value="5"></el-option>
									<el-option label="6岁" value="6"></el-option>
									<el-option label="7岁" value="7"></el-option>
									<el-option label="8岁" value="8"></el-option>
									<el-option label="9岁" value="9"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item prop="curriculum">
								<el-select v-model="formAppointment.curriculum" placeholder="请选择试听课程">
									<el-option label="名校精英幼小衔接班" value="1"></el-option>
									<el-option label="3-9岁美式全景英语" value="2"></el-option>
									<el-option label="3-9岁未来数学思维" value="3"></el-option>
									<el-option label="4-8岁识字阅读" value="4"></el-option>
									<el-option label="4-8岁表演与表达" value="5"></el-option>
								</el-select>
							</el-form-item>

							<div class="btn_box">
								<div class="btn btn_submit_appointment" @click="nextStep(2)">提交预约</div>
							</div>

							<span class="desc">
								完善以上信息，权威的课程顾问将会</br>第一时间联系您哦！
							</span>

							


						</el-form>
					</div>

					<div class="appointment_popup_step2" v-if="appointmentStep == 2">
						<i class="icon_close_small" @click="maskShowStatus = false"></i>
						<i class="step"></i>
						<el-form :model="formAppointment_verifi" label-position="left" :rules="rules" ref="formData" class="rule_form">

							<el-form-item prop="phone">
								<el-input v-model="formAppointment_verifi.phone" placeholder=""></el-input>
							</el-form-item>

							<el-form-item prop="verificode" style="position: relative;">
								<el-input v-model="formAppointment_verifi.verificode" placeholder="请输入验证码"></el-input>
								<div class="veri_code fr" @click="initValCode" v-if="veri_time==0">获取验证码</div>
								<div class="veri_code fr" v-if="veri_time!==0">{{veri_time}} 秒</div>
								<div class="clear"></div>
							</el-form-item>

							<div class="btn_box">
								<div class="btn btn_submit_appointment" @click="nextStep(3)">立即预约</div>
							</div>

							


						</el-form>
					</div>

					<div class="appointment_popup_step3 appointment_success" v-if="appointmentStep == 3" @click="maskShowStatus = false;">
						<i class="icon_success"></i>
						<p class="success_msg">预约成功</p>
						<p class="success_desc">您已成功预约试听课程 </p>
						<p class="success_desc">稍后将有专业课程顾问联系您</p>
					</div>
				</template>


			</div>
		</div> -->
  </div>
</template>

<script>
import copyRight from './common/copyRight'
import topHeader from './common/topHeader'
// import video1 from '../assets/image/1.mp4'
export default {
  name: 'videoDetail',
  data() {
    return {
      tab_id: 3,
      videoEnded: false,
      videoIndex: 0,
      // videoList: [video1, video1, video1],
      videoList: [
				"http://www.mingxiaoclub.cn/video/3.mp4",
				"http://www.mingxiaoclub.cn/video/2.mp4",
				"http://www.mingxiaoclub.cn/video/1.mp4",
			],
      viewText: '重新观看',
      maskShowStatus: false,
      appointmentStep: 1,
      formAppointment: {
				phone: '',
				name: '',
				schoolArea: '',
				age: '',
				curriculum: '',
			},
			formAppointment_verifi: {
				phone: '',
				verificode: '',
      },
			rules:{},
			veri_time: 0,
    }
	},
	beforeCreate() {
		let isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(window.navigator.userAgent);
		let index = this.$route.query.video;
		if (isMobile) { 
			this.$router.push({
				path: '/mobileVideoDetail?video=' + (Number(index)),
				params: {
					index: index
				}
			})
		}else{
			this.$router.push({
				path: '/videoDetail?video=' + (Number(index)),
				params: {
					index: index
				}
			})
		}
	},
  created() {
    this.videoIndex = this.$route.query.video - 1;
    window.scrollTo(0,0);
	},
	
	mounted() {
		// this.$refs.video.addEventListener('pause', function() {
		// 	myVue.videoEnded = true;
		// 	myVue.viewText = '继续观看'
		// 	console.log('11111')
		// })
		// this.$refs.video.addEventListener('canplaythrough', function() {
		// 	myVue.videoEnded = false;
		// 	console.log('aaaa')
    //   // this.viewText = '重新观看'
		// })
	},
  methods: {
    closeVideo() {
      this.$router.push({
        name: 'home',
        params: {
          tab_id: 3
        }
      })
		},
    nextStep(step) {
			this.appointmentStep = step;
		},
    replayVideo() {
			this.videoEnded = false;
			this.$refs.video.play()
		},
		videoCanplaythrough() {
			this.videoEnded = false;
		},
		videoPause() {
			this.viewText = '继续观看'
			this.videoEnded = true;
		},
    videoEnd() {
      this.viewText = '重新观看'
      this.videoEnded = true;
		},
    
    appointmentClick() {
			this.$refs.topHeader.appointmentClick();
		},
    clickMenu(index) {
      this.$router.push({
        name: 'home',
        params: {
          tab_id: index
        }
      })
    },

    clearForm(data) {
			for (let i in data) {
				if (data.hasOwnProperty(i) === true) {
					data[i] = "";
				}
			}
		}

  },

  components: {
    copyRight,
    topHeader,
  }
}


</script>

<style scoped>
/*================== 弹窗 ====================*/
  .mask .btn_submit_appointment{
    width: 100%;
    height: 53px;
    line-height: 53px;
    font-size: 24px;
  }

  .mask .appointment_popup_step2 {
    /* position: relative; */
  }
  .mask .appointment_popup_step2 .step {
    display: inline-block;
    width: 120px;
    height: 129px;
    background: url('../assets/image/step.png') 0 0 no-repeat;
    background-size: 100%;
    /* margin: 0 auto; */
    margin-left: -80px;
    margin-bottom: -4px;
  }
  .mask .icon_close_small {
    display: inline-block;
    position: absolute;
    right: 21px;
    top: 11px;
    width: 28px;
    height: 28px;
    background: url('../assets/image/icon_close_small.png') 0 0 no-repeat;
    background-size: 100%;
    cursor: pointer;
  }

  .mask .appointment_popup_step3 .icon_success {
    display: inline-block;
    width: 124px;
    height: 124px;
    background: url('../assets/image/icon_success.png') 0 0 no-repeat;
    background-size: 100%;
  }


  .mask .appointment_popup_step3 .success_desc {
    color: #666666;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .mask .appointment_popup_step3 .success_msg {
    font-size: 26px;
    color: #FF881F;
    margin-bottom: 37px;
  }

  .mask .veri_code {
    position: absolute;
    right: 40px;
    line-height: 40px;
    top: 0;
    color: #FF8820;
    cursor: pointer;

  }

/*================== 弹窗 ====================*/
.video_detail{
  font-size: 0;
  text-align: center;
  padding: 3.733333rem .533333rem 1.066667rem;
  box-sizing: border-box;
  background: url('../assets/image/video_bg.jpg') 0 0 no-repeat;
  background-size: cover;
}

.video_box{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* height: 540px; */
  margin: 0 auto;
}

.video_box .icon_close_big {
  display: inline-block;
  width: 53px;
  height: 57px;
  background: url('../assets/image/icon_close_big.png') 0 0 no-repeat;
  background-size: 100%;
  position: absolute;
  right: -26px;
  top: -26px;
  cursor: pointer;
  z-index: 2;
}

.video_end_mask {
		position: absolute;
		left: 0;
		top:0;
		background: rgba(0,0,0, .5);
		width: 100%;
		height: 100%;
	}
	
.video_end_mask .popup {
		background: #fff;
		width: 250px;
		height: 180px;
		border-radius: 8px;
		position: absolute;
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%;
		text-align: center;
		padding: 25px 0;
		box-sizing: border-box;
	}

.video_end_mask .popup p {
		margin-top: 18px;
    margin-bottom: 18px;
    font-size: 18px;
	}

.icon_repaly{
		width: 72px;
		height: 39px;
		display: inline-block;
		background: url('../assets/image/icon_replay.png') 0 0 no-repeat;
		background-size: 100%;
		cursor: pointer;
	}
.btn_video_appointment {
		width: 140px;
		height: 35px;
    line-height: 35px;
    font-size: 18px;
	}


  /*================== header ====================*/
	.container{
		width: 100%;
	}

	.header{
		height: 100px;
		width: 100%;
		position: relative;
	}
	.header .logo {
		height: 100%;
		width: 266px;
	}
	.header .logo img{
		width: 266px;
		height: 94px;
		margin-top: 3px;
	}

	.menu_list{
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		left: 303px;
	}
	.menu_list li {
		display: inline-block;
		margin-right: 50px;
		font-size:20px;
		color: #333;
		position: relative;
		cursor: pointer;
	}
	.menu_list li.active {
		color: #FFD37C;
	}
	.menu_list li.active:after {
		content: '';
		position: absolute;
		bottom: -19px;
		left: 50%;
		transform: translateX(-50%);
		display: inline-block;
		width: 80%;
		margin: 0 auto;
		height:4px;
		background:rgba(255,211,124,1);
		border-radius:2px;
	}
	.menu_list li:last-child {
		margin-right: 0;
	}

	.appointment{
		line-height: 100px;
	}
	.appointment .phone {
		font-size: 14px;
		position: relative;
		display: inline-block;
		padding-left: 20px;
	}
	.appointment .phone:before {
		content: '';
		display: inline-block;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 16px;
		height: 16px;
		background: url('../assets/image/icon_phone.png') 0 0 no-repeat;
	}
	.appointment .btn_appointment{
		display: inline-block;
		width: 102px;
		height: 37px;
		vertical-align: middle;
		margin-top: -8px;
		cursor: pointer;
		margin-left: 19px;;
		background: url('../assets/image/btn_appointment.png') 0 0 no-repeat;
	}
/*================== header ====================*/
</style>